@namespace SwashbucklerDiary.Rcl.Pages

<div class="@Class" style="width:100%;">
    <div class="d-flex justify-center scroll-show" style="width:100%;max-height:100%;overflow-y:auto;">
        <div class="px-4" style="width:100%;max-width:480px;">
            <div class="text-h5 text-center mb-5" style="font-weight:700;">
                @(I18n.T("User Agreement and Privacy Policy"))
            </div>

            <div Class="d-flex justify-center mb-5 pa-3">
                <SimpleMarkdownPreview Class="text-subtitle-2 text--secondary"
                                       Value="@(I18n.T("You need to agree to the user agreement and privacy policy before using this app.If you do not agree, we regret that we are unable to provide you with services.\n\nYou can read {0} and {1} for more information. If you agree, please click **Agree** to start our service.",$"[{I18n.T("User agreement")}](user-agreement)",$"[{I18n.T("Privacy policy")}](privacy-policy)"))">
                </SimpleMarkdownPreview>
            </div>

            <div class="d-flex flex-column flex-sm-row-reverse">
                <MButton Class="inverse-surface mb-5 flex-grow-1 ml-sm-2"
                         Rounded="true"
                         Large="true"
                         OnClick="OnOK">
                    @(I18n.T("Agree"))
                </MButton>
                <MButton Class="mb-5 flex-grow-1 mr-sm-2"
                         Rounded="true"
                         Outlined="true"
                         Large="true"
                         OnClick="OnCancel">
                    @(I18n.T("Disagree"))
                </MButton>
            </div>
        </div>
    </div>
</div>
